
<template>
  <div class="gis-main">
    <div class="container" v-if="gisShow">
      <div class="title">
        <div class="gis-title">
          <img :src="icon.titleIcon">
          <p class="gis-text">LC.Visualize.Gis</p>
        </div>
        <el-tabs v-model="selectTab" @tab-click="handleClick" class="gis-tabs">
          <el-tab-pane name="layer">
            <template #label>
              <img :src="selectTab === 'layer' ? icon.selectedLayerIcon : icon.layerIcon" class="tab-icon">
            </template>
          </el-tab-pane>
          <el-tab-pane name="map">
            <template #label>
              <img :src="selectTab === 'layer' ? icon.mapIcon : icon.selectedMapIcon" class="tab-icon">
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-scrollbar wrap-style="overflow-x:hidden;" :max-height="contentMaxHeight">
        <div class="item" v-if="selectTab === 'layer'">
          <div class="sub-title">图层</div>
          <div v-for="item in layerData" :key="item.id">
            <div v-if="item.list && item.list.length > 0" class="item-parent">
              <div class="item_title" style="cursor:pointer;user-select: none;">
                <div class="item_title">
                  <div class="item-label" />
                  <img
                    :src="icon.caretTopIcon"
                    :class="[item.showItem ? 'item-caret-top' : 'item-caret-bottom']"
                  >
                  <div class="item-main">
                    <div class="name" v-text="item.elementName" />
                    <div class="count" v-text="item.list.length + `项图层`" />
                  </div>
                </div>
                <div class="mask" @click="item.showItem = !item.showItem" />
                <svg
                  v-if="item.allVisible"
                  @click="handleAllItemVisible(item)"
                  class="item-visible"
                  style="color: #ca9d4b;"
                  viewBox="0 0 1024 1024"
                  xmlns="http://www.w3.org/2000/svg"
                  data-v-029747aa=""
                >
                  <title>点击显示/隐藏点位图层</title>
                  <path
                    fill="currentColor"
                    d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"
                  />
                </svg>
                <svg
                  v-else
                  @click="handleAllItemVisible(item)"
                  class="item-visible"
                  style="color: #a1a3a9;"
                  viewBox="0 0 1024 1024"
                  xmlns="http://www.w3.org/2000/svg"
                  data-v-029747aa=""
                >
                  <title>点击显示/隐藏点位图层</title>
                  <path
                    d="M876.8 156.8c0-9.6-3.2-16-9.6-22.4-6.4-6.4-12.8-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4 0 9.6 3.2 16 9.6 22.4 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8 28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8 0-44.8 16-83.2 48-112 32-28.8 67.2-48 112-48 28.8 0 54.4 6.4 73.6 19.2L371.2 588.8ZM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6-28.8 48-80 105.6-153.6 172.8-73.6 67.2-172.8 108.8-284.8 115.2-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8 160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z"
                    fill="currentColor"
                  />
                  <path
                    d="M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112-32 28.8-67.2 48-112 48Z"
                    fill="currentColor"
                  />
                </svg>
              </div>
              <el-collapse-transition>
                <div v-if="item.showItem">
                  <el-scrollbar style="height:1.65rem;" wrap-style="overflow-x:hidden;">
                    <div class="sub-item" v-for="subItem in item.list" :key="subItem.id">
                      <div class="sub-item-label" />
                      <div class="sub-item-name" v-text="subItem.elementName" />
                      <div class="item-spaceDiv" />
                      <div
                        class="statistic-number"
                        :class="subItem.tableVisible ? 'selected-number' : 'unselected-number'"
                        @click="handleItemTableVisible(item,subItem)"
                        v-text="subItem.statisticNumber === -1 ? 0 : subItem.statisticNumber"
                        v-if="subItem.statisticNumberShow && subItem.visible"
                      />
                      <div
                        class="svgDiv"
                        @click="handleItemClusterVisible(subItem)"
                        title="点击显示/隐藏聚合图层"
                        v-if="subItem.ifCluster && subItem.visible"
                      >

                        <img :src="icon.cluster" :class="subItem.showCluster ? 'item-cluster-selected' : 'item-cluster'">
                      </div>
                      <!-- <div class="svgDivSpace" v-else /> -->
                      <div
                        class="svgDiv"
                        @click="showHeat(subItem)"
                        v-if="subItem.heatShow && subItem.visible"
                        title="点击显示/隐藏热力图"
                      >
                        <img :src="icon.heatIcon" :class="subItem.heat ? 'item-cluster-selected' : 'item-cluster'">
                      </div>
                      <!-- <div class="svgDivSpace" v-else /> -->
                      <svg
                        v-if="subItem.visible"
                        @click="handleItemVisible(item, subItem)"
                        class="subitem-visible"
                        style="color: #ca9d4b;"
                        viewBox="0 0 1024 1024"
                        xmlns="http://www.w3.org/2000/svg"
                        data-v-029747aa=""
                      >
                        <title>点击显示/隐藏点位图层</title>
                        <path
                          fill="currentColor"
                          d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"
                        />
                      </svg>
                      <svg
                        v-else
                        @click="handleItemVisible(item, subItem)"
                        class="subitem-visible"
                        style="color: #a1a3a9;"
                        viewBox="0 0 1024 1024"
                        xmlns="http://www.w3.org/2000/svg"
                        data-v-029747aa=""
                      >
                        <title>点击显示/隐藏点位图层</title>
                        <path
                          d="M876.8 156.8c0-9.6-3.2-16-9.6-22.4-6.4-6.4-12.8-9.6-22.4-9.6-9.6 0-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8-160 16-288 73.6-377.6 176C44.8 438.4 0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4 0 9.6 3.2 16 9.6 22.4 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4Zm-646.4 528c-76.8-70.4-128-128-153.6-172.8 28.8-48 80-105.6 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4Zm140.8-96c-12.8-22.4-19.2-48-19.2-76.8 0-44.8 16-83.2 48-112 32-28.8 67.2-48 112-48 28.8 0 54.4 6.4 73.6 19.2L371.2 588.8ZM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6-28.8 48-80 105.6-153.6 172.8-73.6 67.2-172.8 108.8-284.8 115.2-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8 160-16 288-73.6 377.6-176C979.199 585.6 1024 528 1024 512s-48.001-73.6-134.401-176Z"
                          fill="currentColor"
                        />
                        <path
                          d="M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112-32 28.8-67.2 48-112 48Z"
                          fill="currentColor"
                        />
                      </svg>
                    </div>
                  </el-scrollbar>
                </div>
              </el-collapse-transition>
            </div>
          </div>
        </div>

        <div class="item" v-else>
          <div v-for="item in mapTypeData" :key="item.element_id">
            <div class="style-title" v-text="item.element_name" />
            <div v-for="sitem in item.children" :key="sitem.element_id">
              <div class="setting" style="cursor:pointer" @click="mapTypeChange(item, sitem)">
                <div class="item-label" />
                <div class="setting-text" v-text="sitem.element_name" />
                <div class="elicon" v-if="sitem.visible">
                  <el-icon>
                    <CircleCheck />
                  </el-icon>
                </div>
              </div>

            </div>
          </div>
        </div>
      </el-scrollbar>
      <div class="bottom" />
    </div>
    <div class="table">
      <DialogTable
        @close-table-dialog="closeTable"
        @click-to-detail="toDetail"
        v-if="tableItem.tableVisible"
        :layer-data="tableItem"
      />
    </div>
    <div class="gis-icon" @click="closeGis">
      <img :src="gisShow ? icon.gisExpandIcon : icon.gisColIcon" class="label">
    </div>
  </div>
</template>
<script lang="ts" setup>
import titleIcon from '../../assets/dialog/gis_title.png'
import layerIcon from '../../assets/dialog/gis_layer.png'
import selectedLayerIcon from '../../assets/dialog/gis_layer_selected.png'
import mapIcon from '../../assets/dialog/gis_map.png'
import selectedMapIcon from '../../assets/dialog/gis_map_selected.png'
import visiblityIcon from '../../assets/dialog/gis_visible.png'
import invisiblityIcon from '../../assets/dialog/gis_invisible.png'
import heatIcon from '../../assets/dialog/heatmap.svg'
import caretTopIcon from '../../assets/dialog/gis_caret_top.png'
import gisColIcon from '../../assets/dialog/gis_icon_col.png'
import gisExpandIcon from '../../assets/dialog/gis_icon_expand.png'
import cluster from '../../assets/dialog/cluster.svg'
import DialogTable from '@/components/Dialog/DialogTable.vue'
import { getCount, mapInfo } from '../../api/mapData'
import { DealData } from '../../utils/utils'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { CircleCheck } from '@element-plus/icons'
import { ElTabs, ElTabPane, ElScrollbar, ElCollapseTransition, ElIcon } from 'element-plus'
const emit = defineEmits(['callbackData', 'clickHeat', 'mapType', 'callbackClusterData', 'nowLayerData', 'toDetail'])
const props = defineProps({
  layerListData: {
    type: Array,
    default: () => []
  }
})
const contentMaxHeight = ref('500px')
const gisShow = ref(false)
// 点击展示表格弹窗时记录父图层
const targetParentItem = ref({} as any)
const targetItem = ref({} as any)
// 所需图标
const icon = reactive({
  titleIcon: titleIcon,
  layerIcon: layerIcon,
  selectedLayerIcon: selectedLayerIcon,
  mapIcon: mapIcon,
  selectedMapIcon: selectedMapIcon,
  visiblityIcon: visiblityIcon,
  invisiblityIcon: invisiblityIcon,
  heatIcon: heatIcon,
  caretTopIcon: caretTopIcon,
  gisColIcon: gisColIcon,
  gisExpandIcon: gisExpandIcon,
  cluster: cluster
})
// 选择器
const selectTab = ref('layer')
// 图层数据
const layerData = ref([] as any)
// 地图底图数据
const mapTypeData = ref([] as any)
// 记录已经打开的表格
const tableItem = ref({} as any)
const handleAllItemVisible = (item: any) => {
  item.allVisible = !item.allVisible
  let ids = ''
  const selList = []
  for (let i = 0; i < item.list.length; i++) {
    const space = item.list[i]
    space.visible = item.allVisible
    if (!item.allVisible) {
      space.showCluster = false
      space.heat = false
    }
    if (i === item.list.length - 1) {
      ids += space.id
    } else {
      ids += space.id + ','
    }
    selList.push(space)
  }
  emit('callbackData', ids, item.allVisible, selList)
  emit('nowLayerData', layerData.value)
}
const handleItemVisible = (parentItem: any, item: any) => {
  item.visible = !item.visible
  if (!item.visible) {
    item.showCluster = false
    item.heat = false
  }
  // 如果这个元素是显示状态 原来全选状态为隐藏状态 即false
  let visibleState = parentItem.allVisible
  // 传入 显示隐藏状态 以及对应的id
  emit('callbackData', item.id, item.visible, [item])
  emit('nowLayerData', layerData.value)
  if (item.visible) {
    for (let i = 0; i < parentItem.list.length; i++) {
      const space = parentItem.list[i]
      if (!space.visible) {
        visibleState = false
        break
      } else {
        visibleState = true
      }
    }
  } else {
    visibleState = false
  }
  parentItem.allVisible = visibleState
}
const handleItemClusterVisible = (item: any) => {
  item.showCluster = !item.showCluster
  if (item.showCluster) {
    item.heat = false
  }
  emit('callbackClusterData', item)
}
// 控制表格是否展示
const handleItemTableVisible = (parentItem:any, item: any) => {
  targetParentItem.value = parentItem
  targetItem.value = item
  if (tableItem.value && tableItem.value.name !== item.name) {
    tableItem.value.tableVisible = !tableItem.value.tableVisible
  }
  item.tableVisible = !item.tableVisible
  tableItem.value = item
}
// 关闭表格弹窗
const closeTable = () => {
  tableItem.value.tableVisible = false
  tableItem.value = {} as any
}
const showHeat = (item: any) => {
  item.heat = !item.heat
  if (item.heat) {
    item.showCluster = false
  }
  emit('clickHeat', item, item.heat)
}

// 跳转详情
const toDetail = (item:any, layerId:any) => {
  emit('toDetail', item, layerId)
}

// 底图类别点击事件
const mapTypeChange = (item: any, sitem: any) => {
  if (sitem.visible === true) {
    return
  }
  const showList: any = []
  const hideList: any = []
  if (item.element_name) {
    if (item.element_name === '基础地图') {
      if (sitem.element_name === '卫星图') {
        sitem.visible = true
        showList.push(sitem)
      }
      if (sitem.element_name === '路网图') {
        let showLuWang = true
        item.children.forEach((citem: any) => {
          if (citem.element_name === '卫星图' && citem.visible === false) {
            showLuWang = false
          }
        })
        if (showLuWang) {
          sitem.visible = true
          showList.push(sitem)
        } else {
          return
        }
      }
      mapTypeData.value.forEach((element: any) => {
        if (element.element_name !== '基础地图') {
          element.children.forEach((citem: any) => {
            citem.visible = false
            hideList.push(citem)
          })
        }
      })
    }
    if (item.element_name === '矢量地图') {
      mapTypeData.value.forEach((element: any) => {
        if (element.element_name !== '矢量地图') {
          element.children.forEach((citem: any) => {
            citem.visible = false
            hideList.push(citem)
          })
        }
      })
      item.children.forEach((el: any) => {
        if (el.id === sitem.id) {
          el.visible = true
          showList.push(el)
        } else {
          el.visible = false
          hideList.push(el)
        }
      })
    }
    let showIds = ''
    for (let i = 0; i < showList.length; i++) {
      const space = showList[i]
      if (i === showList.length - 1) {
        showIds += space.id
      } else {
        showIds += space.id + ','
      }
    }
    emit('mapType', showIds, true, showList)
    let hideIds = ''
    for (let i = 0; i < hideList.length; i++) {
      const space = hideList[i]
      if (i === hideList.length - 1) {
        hideIds += space.id
      } else {
        hideIds += space.id + ','
      }
    }
    emit('mapType', hideIds, false, hideList)
  }
}

const handleClick = () => {
  console.log()
}
const layerListData = computed(() => props.layerListData)
watch(layerListData, () => {
  getMapLayerData()
})
// 获取图层数据
const getMapLayerData = () => {
  layerData.value = []
  const res = layerListData.value
  const dataList: any = DealData(res, (item: any) => {
    item.name = item.elementName
    item.heat = false
    item.showItem = false
  }, 'pid', 'elementId')
  dataList.forEach(async (item: any) => {
    let showAll: boolean = true
    if (item.children) {
      item.list = item.children
      item.list.forEach((sitem: any) => {
        sitem.visible = !!Number(sitem.isShow) || false
        sitem.tableVisible = false
        sitem.showCluster = sitem.showType === 2
        sitem.heat = sitem.showType === 1
        sitem.ifCluster = !(sitem.collectDO && sitem.collectDO.enabled === 1)
        sitem.statisticNumber = 0
        sitem.statisticNumberShow = !(sitem.pointDO && sitem.pointDO.enabled === 1)
        sitem.heatShow = !(sitem.heatmapDO && sitem.heatmapDO.enabled === 1)
        if (!sitem.visible) {
          showAll = false
        }
      })
    }
    item.allVisible = showAll
  })
  layerData.value.push(...dataList)

  getLayerCount()
}
// 获取地图选择数据
const getMapInfo = async () => {
  mapTypeData.value = []
  const res = await mapInfo()
  const dataList: any = DealData(res, item => {
    item.visible = !!Number(item.is_show) || false
  }, 'pid', 'element_id')
  mapTypeData.value.push(...dataList)
}

// 获取图层统计数量
const getLayerCount = async () => {
  const res = await getCount()
  layerData.value.forEach((parent:any) => {
    if (parent.list && parent.list.length > 0) {
      parent.list.forEach((item:any) => {
        res.forEach((subItem:any) => {
          if (Number(item.elementId) === subItem.elementId) {
            item.statisticNumber = subItem.count
          }
        })
      })
    }
  })
}

const closeGis = () => {
  // 如果有展开的表格数据 则隐藏并且置空选中数据
  if (tableItem.value && gisShow.value) {
    closeTable()
  }
  gisShow.value = !gisShow.value
}

onMounted(() => {
  // getMapLayerData()
  contentMaxHeight.value = (document.documentElement.clientHeight || document.body.clientHeight) * 7 / 10 + 'px'

  getMapInfo()
})
</script>
<style lang="scss" scoped>
.gis-main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  .elicon {
    color: white;
    margin: auto 0.5rem auto auto;
  }

  .table {
    margin-left: 10px;
  }

  .gis-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    margin-left: 10px;
    opacity: 1;
    background: #242D3A;
    box-sizing: border-box;
    border: 1px solid rgba(0, 170, 255, 0.2);
    cursor: pointer;

    .label {
      width: 16px;
      height: 16px;
    }
  }

  .container {
    display: flex;
    flex-direction: column;
    background-color: #242D3A;
    box-sizing: border-box;
    overflow: hidden;

    .title {
      width: 100%;
      height: 80px;
      padding: 12px 12px 0 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      background: #283442;

      .gis-title {
        display: flex;

        .gis-text {
          font-size: 12px;
          font-weight: normal;
          line-height: 24px;
          color: #E6A23C;
          margin-left: 12px;
        }
      }

      .gis-tabs {
        .tab-icon {
          width: 14px;
          height: 14px;
        }

        &:deep(.el-tabs__header) {
          margin: 0;
          padding: 0;

          .el-tabs__item {
            width: 24px;
            height: 40px;
            padding: 0;
            text-align: center;
          }

          .el-tabs__active-bar {
            background-color: #E6A23C;
          }

          .el-tabs__nav-wrap::after {
            width: auto;
            height: 2px;
            background-color: transparent;
          }
        }
      }

    }

    .bottom {
      height: 19px;
      background-color: #283442;
    }
  }

  .item-label {
    width: 6px;
    height: 100%;
    border-radius: 0px 3px 3px 0px;
    background: #E6A23C;
  }

  .item {
    display: flex;
    flex-direction: column;
    padding: 12px;
    box-sizing: border-box;
    max-height: 10rem;

    .sub-title {
      font-size: 18px;
      font-weight: 500;
      line-height: 20px;
      letter-spacing: 0px;
      color: #FFFFFF;
      // overflow: hidden;
    }

    .item-parent {
      width: 300px;
      display: flex;
      flex-direction: column;
      margin-top: 8px;

      .item_title {
        display: flex;
        background-color: #283442;
        height: 48px;
        position: relative;
      }

      .mask{
        position: absolute;
        width: 100%;
        height: 100%;
      }

      .item-main {
        display: flex;
        flex-direction: column;
        margin-top: 3px;

        .name {
          font-size: 14px;
          font-weight: 500;
          line-height: 21px;
          color: #FFFFFF;
        }

        .count {
          font-size: 12px;
          font-weight: normal;
          line-height: 21px;
          letter-spacing: 0px;
          color: #8291A9;
        }
      }

      .item-caret-top {
        width: 16px;
        height: 16px;
        margin-left: 28px;
        margin-top: 5px;
        transform: rotate(-180deg);
      }

      .item-caret-bottom {
        width: 16px;
        height: 16px;
        margin-left: 28px;
        margin-top: 5px;
        transform: rotate(90deg);
      }

      .item-visible {
        width: 16px;
        height: 16px;
        margin: auto 14px auto auto;
        cursor: pointer;
        z-index: 1;
      }

      .subitem-visible {
        width: 16px;
        height: 16px;
        margin: auto 14px auto 14px;
        cursor: pointer;
      }

      .item-heat {
        width: 16px;
        height: 16px;
        margin: auto 0px auto 14px;
        cursor: pointer;
      }

      .svgDiv {
        width: 16px;
        height: 16px;
        margin: auto 0px auto 12px;
        overflow: hidden;
        cursor: pointer;
        user-select: none;

        .item-cluster {
          width: 16px;
          height: 16px;
          filter: drop-shadow(#c9cbcf 100px 0);
          transform: translateX(-100px);
        }

        .item-cluster-selected {
          width: 16px;
          height: 16px;
          filter: drop-shadow(#d5a54c 100px 0);
          transform: translateX(-100px);
        }
      }

      .item-spaceDiv {
        width: 0px;
        height: 0px;
        margin: auto 0px auto auto;
      }

      .statistic-number {
        font-size: 12px;
        font-weight: 500;
        line-height: 21px;
        letter-spacing: 0px;
        cursor: pointer;
      }

      .unselected-number{
        color:#c9cbcf;
      }

      .selected-number{
        color:#E6A23C;
      }

      .sub-item {
        height: 32px;
        display: flex;
        align-items: center;
        margin-top: 6px;
        margin-left: 42px;

        .sub-item-label {
          width: 3px;
          height: 100%;
          border-radius: 0px 3px 3px 0px;
          background: #E6A23C;
        }

        .sub-item-name {
          font-size: 12px;
          font-weight: 500;
          line-height: 21px;
          /* 纯白 */
          color: #FFFFFF;
          margin-left: 26px;
        }
      }
    }

    .setting {
      display: flex;
      width: 300px;
      background-color: #283442;
      height: 48px;
      margin-top: 6px;
      align-items: center;

      .setting-text {
        font-size: 14px;
        color: #8291A9;
        margin-left: 12px;
      }
    }

    .style-title {
      font-size: 18px;
      font-weight: 500;
      line-height: 20px;
      letter-spacing: 0px;
      color: #FFFFFF;
      overflow: hidden;
      margin-top: 6px;
    }
  }

}
</style>
